<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>免密码静态资源安全访问</title>
    <!-- 使用免密码安全CSS URL -->
    <link rel="stylesheet" th:href="@{${secureCssUrl}}">
</head>
<body>
    <div class="container">
        <header>
            <img th:src="@{${secureImageUrl}}" alt="Logo" class="logo">
            <h1>免密码静态资源安全访问演示</h1>
            <div class="info-banner">
                <p>✅ 无需用户登录验证 | 🔒 基于时间戳Token | ⏱️ 有效期: <span th:text="${tokenExpiry}"></span>秒</p>
            </div>
        </header>
        
        <main>
            <div class="resource-card">
                <h3>安全资源URL示例</h3>
                <div class="url-example">
                    <label>CSS 资源:</label>
                    <code th:text="${secureCssUrl}"></code>
                </div>
                <div class="url-example">
                    <label>JS 资源:</label>
                    <code th:text="${secureJsUrl}"></code>
                </div>
                <div class="url-example">
                    <label>图片资源:</label>
                    <code th:text="${secureImageUrl}"></code>
                </div>
            </div>
            
            <div class="resource-card">
                <h3>实时演示</h3>
                <div class="demo-area">
                    <p>当前时间: <span id="current-time" th:text="${currentTime}"></span></p>
                    <p>安全图片预览:</p>
                    <img th:src="@{${secureImageUrl}}" alt="安全图片演示" class="demo-image">
                    <div class="actions">
                        <button onclick="refreshResources()" class="btn btn-primary">刷新资源URL</button>
                        <button onclick="validateCurrentResources()" class="btn btn-secondary">验证资源权限</button>
                        <a th:href="@{/downloads}" class="btn btn-success">下载资源演示</a>
                    </div>
                </div>
            </div>
            
            <div class="resource-card">
                <h3>API 调用示例</h3>
                <div class="api-example">
                    <h4>生成安全URL:</h4>
                    <code>POST /api/generate-secure-url</code>
                    <pre>{
  "resourcePath": "/protected/css/style.css"
}</pre>
                    
                    <h4>使用预共享密钥:</h4>
                    <code>POST /api/generate-secure-url/psk</code>
                    <pre>{
  "resourcePath": "/protected/downloads/document.pdf",
  "clientId": "client_123456"
}</pre>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 使用免密码安全JS URL -->
    <script th:src="@{${secureJsUrl}}"></script>
</body>
</html>
